<template>
  <div class="userDialog-container ">
    <el-dialog
      :title="differenttitle? '编辑菜单' : '创建菜单'"
      :visible="visible"
      @update:visible="$emit('update:visible', $event)"
      width="60%"
      @closed="onclosed"
      v-loading="loading"
    >
      <el-form ref="menusform" :rules="menusRules" :model="menusForm" label-width="100px">
        <el-form-item label="权限组名称">
          <el-radio :disabled="disabled" v-model="menusForm.is_point" :label="false">菜单</el-radio>
          <el-radio :disabled="disabled" v-model="menusForm.is_point" :label="true">权限点</el-radio>
        </el-form-item>
        <el-form-item label="权限组名称" prop="pid">
          <el-select v-model="pidname" placeholder="主菜单">
            <el-option style="height: auto;" value="">
            </el-option>
              <el-tree 
              @node-click="handleNodeClick"
              node-key="id"
              default-expand-all
              :data="treedata"
              :props="defaultProps"
              ></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="menusForm.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="menusForm.title"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { findmenusList, postMenus, MenusDetails, putMenus } from '@/api/menus'

export default {
  
  name: 'userDialog',
  props: {
    visible: Boolean,
    differenttitle: Boolean,
    selectId: Number
  },
  data () {
    return {
        pidname:'',
      menusForm: {
        pid: '',
        is_point: false,
        code: '',
        title: '',
        id: '',
      },
      menusRules: {
        pidname:[],
        pid: [],
        code: [
          { required: true, message: '代码不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ]
      },
      treedata: [{
          title: '主菜单',
          id: 0,
          pid: '',
          childs: []
        }
      ],
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      pid: '',
      disabled: false,
      loading: false
    }
  },
  created () {
    this.menusList()
  },
  methods: {
    onClose () {
      this.$emit('update:visible', false)
    },
    onConfirm () {
      this.$refs.menusform.validate(async(valid)=>{
        if(valid) {
          if(!this.differenttitle)
          {
            await postMenus({...this.menusForm, pid: this.pid})
          } else {
            await putMenus(this.selectId, {...this.menusForm, pid: this.pid})
          }
        }
      })
      this.$emit('refresh')
      this.onClose()
    },
    // 获取到菜单列表
    async menusList () {
      const res = await findmenusList()
      console.log(res);
      this.treedata.forEach(item=> {
        item.childs= res
      })

      console.log( this.treedata);
    },
    // 获取到的菜单详情
    async getMenusDetails () {
      this.loading = true
      const res = await MenusDetails(this.selectId)
      this.menusForm = res
      console.log(res);
      if (!res.pid) {
         this.pidname =  '主菜单'
      } else {
        this.getPidTitle(res.pid)
      }
      this.loading = false
    },
    onclosed () {
      this.$refs.menusform.resetFields()
      this.disabled = false
    },
     getPidTitle(pid) {
      if (pid) {
        this.treedata.forEach((ele) => {
          if (ele.id === pid) {
            this.pidname = ele.title;
            console.log(this.pidname);
            return; 
          }
          if (Reflect.has(ele, "childs")) {
            ele.childs.forEach((item) => {
              if (item.id === pid) {
                this.pidname = item.title;
                return;
              }
            });
          }
        });
      }
    },
    // 节点被点击时获取title赋值
    handleNodeClick (data) {
      console.log(data.title);
      this.pidname = data.title
      this.pid = data.id
    }
  },
  watch: {
    visible (val) {
      this.pidname = ''
      this.menusList()
      if(val && this.differenttitle && this.selectId) {
        this.getMenusDetails()
        this.disabled =true
      }
    },
  menusForm:{
    handler(newval){
      this.menusForm = newval
      console.log(this.menusForm);
    },
    deep:true,
    immediate:true
  }

  }
}
</script>

<style>

</style>